<!-- 首页位置选择功能简化测试 -->
<template>
  <view class="min-h-screen bg-gray-50 p-6">
    <!-- 页面标题 -->
    <view class="mb-8">
      <text class="text-[36rpx] font-bold text-gray-900 text-center">首页位置选择功能测试（简化版）</text>
    </view>

    <!-- 功能说明 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">功能说明</view>
      <view class="space-y-3 text-[24rpx] text-gray-700">
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            1
          </view>
          <text class="flex-1">直接使用现有的CityPicker组件，无需重新加载数据</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            2
          </view>
          <text class="flex-1">复用现有的API请求逻辑和数据结构</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            3
          </view>
          <text class="flex-1">选择后直接更新locationObj.address_component</text>
        </view>
      </view>
    </view>

    <!-- 模拟首页位置区域 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">模拟首页位置区域</view>
      
      <view 
        class="location flex items-center text-[28rpx] font-medium p-4 bg-gray-50 rounded-xl cursor-pointer transition-all duration-200 active:bg-gray-100"
        @click="handleLocation"
      >
        <IconFont name="location" size="14" class="mr-[10rpx] text-blue-600"></IconFont>
        <text class="text-gray-700">
          {{ currentLocation.province || '未授权定位' }} · {{ currentLocation.city || '未授权定位' }}
        </text>
        <IconFont name="arrow-down" size="12" class="ml-auto text-gray-400"></IconFont>
      </view>
      
      <view class="mt-4 p-3 bg-blue-50 rounded-lg">
        <text class="text-[24rpx] text-blue-600 font-medium">点击上方位置区域进行测试</text>
      </view>
    </view>

    <!-- 当前locationObj状态 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">当前locationObj状态</view>
      <view class="space-y-3 text-[24rpx] text-gray-700">
        <view class="flex justify-between">
          <text>省份：</text>
          <text class="font-medium text-blue-600">{{ currentLocation.province || '未设置' }}</text>
        </view>
        <view class="flex justify-between">
          <text>城市：</text>
          <text class="font-medium text-blue-600">{{ currentLocation.city || '未设置' }}</text>
        </view>
        <view class="flex justify-between">
          <text>完整地址：</text>
          <text class="font-medium text-green-600">{{ fullAddress }}</text>
        </view>
      </view>
    </view>

    <!-- 操作历史 -->
    <view v-if="operationHistory.length > 0" class="bg-white rounded-2xl p-6 shadow-sm">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">操作历史</view>
      <view class="space-y-3">
        <view 
          v-for="(record, index) in operationHistory" 
          :key="index"
          class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
        >
          <view class="flex items-center">
            <IconFont name="check-circle" class="text-green-600 mr-2" size="24rpx" />
            <text class="text-[24rpx] text-gray-800">{{ record.operation }}</text>
          </view>
          <text class="text-[22rpx] text-gray-500">{{ record.timestamp }}</text>
        </view>
      </view>
    </view>

    <!-- 区域选择器 -->
    <CityPicker
      v-if="showRegionPicker"
      mode="city"
      placeholder="请选择服务区域"
      title="选择服务区域"
      @confirm="handleRegionConfirm"
      @cancel="handleRegionCancel"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/user'
import CityPicker from './CityPicker.vue'

// 用户store
const userStore = useUserStore()
const { locationObj } = storeToRefs(userStore)

// 响应式数据
const showRegionPicker = ref(false)
const operationHistory = ref<Array<{
  operation: string
  timestamp: string
}>>([])

// 当前位置信息
const currentLocation = computed(() => {
  return {
    province: locationObj.value?.address_component?.province,
    city: locationObj.value?.address_component?.city
  }
})

// 完整地址
const fullAddress = computed(() => {
  const parts = []
  if (currentLocation.value.province) parts.push(currentLocation.value.province)
  if (currentLocation.value.city) parts.push(currentLocation.value.city)
  return parts.length > 0 ? parts.join(' ') : '未设置位置'
})

/**
 * 添加操作记录
 */
const addOperationRecord = (operation: string) => {
  operationHistory.value.unshift({
    operation,
    timestamp: new Date().toLocaleTimeString()
  })
  
  // 只保留最近10条记录
  if (operationHistory.value.length > 10) {
    operationHistory.value = operationHistory.value.slice(0, 10)
  }
}

/**
 * 处理位置点击
 */
const handleLocation = () => {
  showRegionPicker.value = true
  addOperationRecord('打开CityPicker组件')
}

/**
 * 处理区域选择确认
 */
const handleRegionConfirm = (result: any) => {
  if (result.province && result.city) {
    // 更新locationObj
    locationObj.value = {
      ...locationObj.value,
      address_component: {
        ...locationObj.value.address_component,
        province: result.province.name,
        city: result.city.name
      }
    }
    
    // 关闭弹窗
    showRegionPicker.value = false
    
    const operationText = `确认选择：${result.province.name} ${result.city.name}`
    addOperationRecord(operationText)
    
    Taro.showToast({
      title: `已选择：${result.province.name} ${result.city.name}`,
      icon: 'success'
    })
  }
}

/**
 * 处理区域选择取消
 */
const handleRegionCancel = () => {
  // 关闭弹窗
  showRegionPicker.value = false
  
  addOperationRecord('取消选择')
  
  Taro.showToast({
    title: '已取消选择',
    icon: 'none'
  })
}
</script>
